<template>
  <el-table
    @row-contextmenu="rightClick"
    :header-cell-style="{ 'text-align': 'center' }"
    :data="transHistory"
    style="width: 100%"
    height="100%"
  >
    <el-table-column width="38">
      <template slot-scope="scope">
        <i class="icon" :class="getSuffix(scope.row.filename)"></i>
      </template>
    </el-table-column>
    <el-table-column label="文件名" show-overflow-tooltip align="left">
      <template slot-scope="scope">
        <span>{{ scope.row.filename }}</span>
      </template>
    </el-table-column>
    <el-table-column label="传输类型" align="center">
      <template slot-scope="scope">
        {{ scope.row["downloaded"] != null ? "下载" : "上传" }}
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import { deleteFile } from "@/bus/utils";

export default {
  name: "Finished",
  data() {
    return { types: ["zip", "mp3", "mp4"] };
  },
  computed: {
    ...mapGetters(["transHistory"])
  },
  mounted() {
    this.$bus.$on("clearHistory", () => this.clearHistory());
  },
  destroyed() {
    this.$bus.$off(["clearHistory"]);
  },
  methods: {
    ...mapActions(["clearHistory"]),
    rightClick(row, column, event) {
      let items = [
        {
          label: "删除",
          onClick: () => this.deleteHistoryElement(row)
        }
      ];
      if (row["downloaded"] != null) {
        items.push({
          label: "删除同时删除文件",
          onClick: () => {
            deleteFile(row.filename);
            this.deleteHistoryElement(row);
          }
        });
      }
      this.$contextmenu({
        items: items,
        event,
        zIndex: 3,
        minWidth: 140
      });
    },
    getSuffix(filename) {
      const suffix = filename
        .split(".")
        .slice(-1)
        .pop();
      return this.types.indexOf(suffix) > 0 ? suffix : "misc";
    }
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: no-repeat 100% 100%;
  background-size: cover;
  flex-shrink: 0;
}
.dir {
  background-image: url("../../static/icons/folder.png");
}
.zip {
  background-image: url("../../static/icons/zip.png");
}
.misc {
  background-image: url("../../static/icons/misc.png");
}
.mp3 {
  background-image: url("../../static/icons/music.png");
}
.jpg {
  background-image: url("../../static/icons/jpg.png");
}
.mp4 {
  background-image: url("../../static/icons/video.png");
}
.txt {
  background-image: url("../../static/icons/txt.svg");
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
